<template>
	<div class="user_data_wrapper">
		<el-form>
			<el-form-item label="头像"><el-avatar :size="64" :src="avatarImage"></el-avatar></el-form-item>
			<el-form-item label="用户名">{{ userDetail.userName }}</el-form-item>
			<el-form-item label="性别">{{ userDetail.sex | sexFilter }}</el-form-item>
			<el-form-item label="院系">{{ userDetail.deptName }}</el-form-item>
			<el-form-item label="专业"></el-form-item>
			<el-form-item label="班级"></el-form-item>
			<el-form-item label="学号">{{ userDetail.radom }}</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			avatarImage: '',
			userDetail: {}
		};
	},
	computed: {
		userInfo() {
			return this.$local.get('userInfo') || {};
		}
	},
	mounted() {
		this.getUserDetail();
	},
	methods: {
		...mapActions(['getUserInfo']),
		//获取用户详细信息
		async getUserDetail() {
			let result = await this.getUserInfo(this.userInfo.id).then((res) => res);
			console.log(result);
			this.userDetail = !result ? {} : result;
		}
	}
};
</script>

<style lang="scss" scoped>
.user_data_wrapper ::v-deep {
	position: relative;
	.edit_button {
		position: absolute;
		top: -52px;
		right: 20px;
		.el-button {
			font-size: 16px;
		}
	}
	.el-form {
		width: 50%;
		margin-top: 30px;
	}
	.el-form-item {
		display: flex;
		align-items: center;
		min-height: 41px;
	}
	.el-form-item__label {
		width: 120px;
		flex-shrink: 0;
		font-size: 16px;
		margin-right: 30px;
	}
	.el-form-item__content {
		flex: 1;
		font-size: 16px;
	}
	.el-avatar--circle {
		display: block;
	}
	img.avatar {
		display: block;
		width: 64px;
		height: 64px;
		object-fit: cover;
	}
	i.el-icon-plus {
		display: block;
		width: 64px;
		height: 64px;
		line-height: 62px;
		border-radius: 50%;
		box-sizing: border-box;
		border: solid 1px #dcdfe6;
	}
}
</style>
